<template>
	<view class="owndrive">
		<!--搜索-->
		<!-- <searchbar @input="onSearchInput" @onPopupClick="onPopupClick" @search="onSearchConfirm" :area="area"></searchbar> -->
		<view class="top-list">
			<block v-for="(item,index) in toplist" :key="index">
				<view class="list-info" @click='goDetail(item.id,1)'>
					<view class="images">
						<image :src="item.listImage"></image>
					</view>
					<view class="desc">
						<view class="title">
							<text style="overflow:hidden;white-space:no-wrap;text-overflow:ellipsis;">{{item.title}}</text>
						</view>
						<view class="digest">
							<text style="">{{item.digest}}</text>
						</view>
					</view>
				</view>
			</block>
			<view class="br"></view>
			<view class="more" @click="moreList(1)">
				<text class="">查看更多</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<view class="scenic-list">
			<view class="scenic-title">
				<text class="title">自驾游商品</text>
			</view>
			<view class="scenic-info">
				<block v-for="(item,index) in goodslist" :key="index">
					<view class="item-info" @click='goDetail(item.id,2)'>
						<view class="scenic-left">
							<image :src='item.listImage' style="border-radius: 10upx;"></image>
							<view class="address">
								<text>{{item.city}}</text>
							</view>
						</view>
						<view class="scenic-right">
							<view class="name">
								<text>{{item.title}}</text>
							</view>
							<view class="tips">
								<view class="tip-info" v-for="(item,index) in item.featureTip" :key="index">
									<text>{{item}}</text>
								</view>			
							</view>
							<view class="comment-nums">
								<view style="color: #aaa;">
									<text></text>
								</view>
								<view class="price-info">
									<text style="font-size: 31upx;">￥</text>
									<text style="font-size: 47upx;">{{item.marketPrice || '0'}}</text>
									<text style="font-size: 28upx;">起</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="more" @click="moreList(2)">
				<text class="">查看更多</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<view class="scenic-list">
			<view class="scenic-title">
				<text class="title">自驾游基地</text>
			</view>
			<view class="scenic-info">
				<block v-for="(item,index) in baselist" :key="index">
					<view class="item-info" @click='goDetail(item.id,3)'>
						<view class="scenic-left">
							<image :src='item.listImage' style="border-radius: 10upx;"></image>
							<view class="address">
								<text>{{item.city}}</text>
							</view>
						</view>
						<view class="scenic-right">
							<view class="name">
								<text>{{item.title}}</text>
							</view>
							<view class="tips">
								<view class="tip-info" v-for="(item,index) in item.featureTip" :key="index">
									<text>{{item}}</text>
								</view>			
							</view>
							<view class="comment-nums">
								<view style="color: #aaa;">
									<text>{{item.readCount || 0}}人浏览</text>
								</view>
								<view class="price-info">
									<!-- <text style="font-size: 31upx;">￥</text> -->
									<!-- <text style="font-size: 47upx;">{{item.sellingPrice || '0'}}</text> -->
									<!-- <text style="font-size: 28upx;">起</text> -->
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="more" @click="moreList(3)">
				<text class="">查看更多</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import searchbar from "@/components/search-bar"
	export default {
		components:{
			searchbar
		},
		data() {
			return {
				toplist:[],
				goodslist:[],
				baselist:[]
			};
		},
		onLoad:function(option){
			this.getTopList();
			this.getGoodsList();
			this.getBaseList();
		},
		methods:{
			getBaseList(){
				let params = {
					pageIndex:'1',
					pageSize:'4',
					channelType:'1',
					centreType:'自驾游基地'
				}
				this.$postApi(this.$path.GET_NEW_DESTINATION_LIST,params).then(res => {
					console.log("自驾游基地返回数据--------------->",res.data)
					if(res.data.success){
						let list = res.data.data.list;
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage)
							let tmp = []
							if(item.featureTip){
								item.featureTip.toString().split(';').forEach(item =>{
									if(item){
										tmp.push(item)
									}	
								})
							}
							item.featureTip = tmp
						})
						this.baselist = list
					}
				})
			},
			moreList(type){
				switch(type){
					//自驾游线路列表
					case 1:
					var title = '自驾游线路'
						uni.navigateTo({
							url: '/pages/selfdrivingline/selfdrivingline?lineType=' + title,
							animationType: 'pop-in',
							animationDuration: 200
						});
					break;
					//自驾游商品列表
					case 2:
						var title = '自驾游商品'
						uni.navigateTo({
							url: '/pages/shopping_new/shoppinglist?title=' + title + '&ebusinessType=' + title,
							animationType: 'pop-in',
							animationDuration: 200
						});
					break;
					//自驾游基地列表
					case 3:
						uni.navigateTo({
							url: '/pages/baselist/baselist',
							animationType: 'pop-in',
							animationDuration: 200
						});
					break;
				}
			},
			goDetail(id,type){
				switch(type){
					//自驾游线路详情
					case 1:
						uni.navigateTo({
							url: '/pages/lineroad/lineroaddetail?id=' + id,
							animationType: "pop-in",
							animationDuration: 200
						})
					break;
					//自驾游商品详情
					case 2:
						uni.navigateTo({
							url: '/pages/shopping_new/shoppingdetail?id='+id,
							animationType: 'pop-in',
							animationDuration: 200
						});
					break;
					//自驾游基地详情
					case 3:
						uni.navigateTo({
							url: '/pages/basedetail/basedetail?id='+id,
							animationType: 'pop-in',
							animationDuration: 200
						});
					break;
				}
			},
			
			getGoodsList(){
				let params = {
					pageIndex:'1',
					pageSize:'4',
					channelType:'1',
					ebusinessType:'自驾游商品'
				}
				this.$postApi(this.$path.GET_NEW_COMMODITY_LIST,params).then(res => {
					console.log("自驾游商品返回数据--------------->",res.data)
					if(res.data.success){
						let list = res.data.data.list;
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage)
							let tmp = []
							if(item.featureTip){
								item.featureTip.toString().split(';').forEach(item =>{
									if(item){
										tmp.push(item)
									}	
								})
							}
							item.featureTip = tmp
						})
						this.goodslist = list
					}
				})
			},
			getTopList(){
				let params = {
					pageIndex:'1',
					pageSize:'4',
					channelType:'1',
					lineType:'自驾游'
				}
				this.$postApi(this.$path.GET_LINEROAD_LIST,params).then(res => {
					console.log("自驾游线路返回数据--------------->",res.data)
					if(res.data.success){
						let list = res.data.data.list;
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage)
							let tmp = []
								if(item.featureTip){
									item.featureTip.toString().split(';').forEach(item =>{
										if(item){
											tmp.push(item)
										}	
									})
								}
								item.featureTip = tmp
						})
						this.toplist = list
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.br{
		width: 100%;
		height: 1upx;
		background: #ECECEC;
		margin: 20upx 0;
	}
	.owndrive{
		min-height: 100%;
		font-size: 32upx;
		background: #f7f7f7;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.top-list{
		padding: 20upx 24upx;
		background: #fff;
	}
	.more{
		// border-top: 1upx solid #eee;
		text-align: center;
		color: #0092FF;
		// padding-top: 15upx;
	}
	.list-info{
		// margin-bottom: 20upx;
		border-radius: 12upx;
		.images{
			height: 350upx;
			image{
				border-radius: 12upx 12upx 0 0 ;
			}
		}
		.desc{
			padding: 25upx;
			background: #F6F6F6;
			border-radius:0 0  12upx 12upx ;
			.title{
				font-size: 42upx;
				font-weight: bold;
				overflow:hidden;
				white-space:nowrap;
				text-overflow: ellipsis;
			}
			.digest{
				font-size: 30upx;
				color: #AAAAAA;
				line-height: 54upx;
				overflow:hidden;
				white-space:nowrap;
				text-overflow: ellipsis;
			}	
		}
	}
	
	
	.scenic-list{
		   background: #fff;
		   padding: 50upx 24upx 20upx 24upx;
		   margin-top:20upx;
	}
	.scenic-title{
		   .title{
			   font-family: PingFang-SC-Bold;
			   font-size: 40upx;
			   font-weight: 600;
			   color: #000000;
			   // font-weight: bold;
		   }
		   .title-child{
			   color: rgb(77,77,77);
			   font-family: PingFang-SC-Medium;
			   color: #4d4d4d;
			   font-size: 30upx;
			   letter-spacing:0upx;
		   }
	}
	.scenic-info{
		   padding: 30upx 0 0 0   ;
		  .more{
		  	   text-align: center;
		  	   color: #0092FF;
		  	   // padding-bottom: 2upx;
		  }
		   .item-info{
			   padding-bottom: 20upx;
			   display: flex;
			   // height: 250upx;
			   margin-bottom: 20upx;
			   border-bottom:1upx solid #eee;
		   }
		  
		   .scenic-left{
			   position: relative;
			   height: 216upx;
			   width: 39%;
			  .address{
				  position: absolute;
				  top: 0;
				  left: 0;
				  font-size: 20upx;
				  color: #fff;
				  padding: 5upx 15upx 5upx 10upx;
				  background: rgba($color: #000, $alpha: 0.6);
				  border-bottom-right-radius: 13upx;
				  border-top-left-radius: 10upx;
				  // width: 100upx;
				  // height: 40upx;
			  }
			  .travel-day{
				  position: absolute;
				  left:0;
				  bottom : 0;
				  font-size: 24upx;
				  color: #fff;
				  width: 100%;
				  padding: 5upx 10upx 5upx 10upx;
				  background: rgba($color: #000, $alpha: 0.6);
				  display: flex;
				  justify-content: center;
			  }
		   }
		   .scenic-right{
			   position: relative;
			   width:61%;
			   // display: flex;
			   // flex-direction: column;
			   // justify-content: space-between;
			   // align-items: flex-end;
			   padding:0 16upx;
			   
			   .name{
				   font-size: 34upx;
				   color: #333;
					letter-spacing: 1rpx;
				   font-family: PingFang-SC-Bold;
				   font-weight: bold;
			   }
			   .tips{
				   // padding: 6upx;
				   margin-top: 18upx;
				   display: flex;
				   
			   }
			   .tip-info{
				   display: flex;
				   align-items: center;
				   height: 40upx;
				   color: #0092ff;
				   font-size: 26upx;
				   margin-right: 10upx;
				   border-radius: 8upx;
				   padding: 20upx 10upx;
				   border: 1upx solid #0092ff;
			   }
			   .comment-nums{
				   // display: flex;
				   // align-items: flex-end;
				   // justify-content: space-between;
				   margin-right: 26upx;
				   position: absolute;
				   bottom: 0;
				   right: 0;
					
				   .price-info{
					   font-family: PingFang-SC-Medium;
					   // letter-spacing: 6upx;
					   font-size: 32upx;
					    color:#ff4d1d;
						text{
							margin-left: 4upx;
						}
				   }
			   }
		   }
	}
	
</style>
